<template>
	<view class="l-card-cell ">
		<view class="l-card-cell-label">{{label}}：</view>
		<view class="l-card-cell-value" :class="{ellipsis:ellipsis}" :style="{'color':textColor,'-webkit-line-clamp':textClamp}">{{value || nullValue}}
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			label: {
				default: "",
				type: String
			},
			textColor: {
				default: "",
				type: String
			},
			value: {
				default: "",
				type: String
			},
			ellipsis: {
				default: true,
				type: Boolean
			}, //省略
			nullValue: {
				default: "--",
				type: String
			},
			textClamp:{
				default: "1",
				type: String
			}

		},
	}
</script>
<style scoped lang="scss">
	.l-card-cell {
		display: flex;
		// align-items: center;
		margin-bottom: 10rpx;

		&-label {
			color: #A4A7B3;
			font-size: 28rpx;
			margin-right: 6rpx;
		}

		&-value {
			font-size: 28rpx;
			color: #323233;
			flex: 1;
			width: 0;
		}

		.ellipsis {
			overflow: hidden;
			white-space: normal;
			// white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-box-orient:vertical;
			    display: -webkit-box;
		}
	}
</style>
